import React from 'react'

import { Button, Checkbox, Form, Input } from 'antd';
import img from '../../assets/image.png'
import request from '../../api/request';
import { useDispatch } from 'react-redux';
import { useName } from '../../store/slice/ticket';
import { useNavigate } from 'react-router-dom';

function Index() {
    const dispatch=useDispatch()
    const navigate=useNavigate()
    const onFinish= (values) => {
        console.log('Success:', values);
        request.post('/api/login',values).then((res)=>{
            console.log(res);
            localStorage.setItem('token',res.data.token)
            localStorage.setItem('username',res.data.username)
            localStorage.setItem('img','https://lupic.cdn.bcebos.com/20191206/219802%2318.jpg')
            dispatch(useName(res.data))
            navigate('/index')
        })
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <div>
            <div>
                <img style={{ width: '100%',position:'fixed' }} src={img} alt="" />
            </div>

            <div style={{textAlign:'center',display:'flex','justify-content': 'center','align-items': 'center',width:'500px',height:'300px',position:'fixed',right:'10%',top:'40%',background:'rgba(0,0,0,0.3)' }}>
                <Form
                    name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                >
                    <Form.Item style={{width:'400px'}}>
                        <h2 style={{color:'skyblue'}}>物联网综合业务支撑云平台</h2>
                    </Form.Item>

                    <Form.Item
                        
                        // label="用户名"
                        name="account"
                        rules={[{ required: true, message: 'Please input your username!' }]}
                    >
                        <Input style={{width:'150%'}} placeholder='请输入用户名'/>
                    </Form.Item>

                    <Form.Item
                        // label="密码"
                        name="password"
                        rules={[{ required: true, message: 'Please input your password!' },{pattern:/^[a-zA-Z0-9]{6,12}$/,message:'密码格式不正确'}]}
                    >
                        <Input.Password style={{width:'150%'}} placeholder='请输入密码'/>
                    </Form.Item>

                    <Form.Item name="remember" valuePropName="checked" label={null}>
                        <Checkbox style={{ color:'#ccc'}}>记住我</Checkbox>
                    </Form.Item>

                    <Form.Item label={null}>
                        <Button block type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>



        </div>
    )
}

export default Index
